<template>
  <div>
      <div class="newAddress">
      <!-- 顶部导航栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />


    <!-- 新增地址设置 -->
    
        <div class="item">
            <van-field v-model="name" type="text" placeholder="姓名" />
        </div>
        <div class="item">
            <van-field v-model="tel" type="tel" placeholder="手机号码" />
        </div>
        <div class="item">
            <van-field readonly  placeholder="省份、城市、区县" @click="switchs" class="area" />
            <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" >
                <van-area title="标题" :area-list="areaList" @confirm="getArea" />
            </van-popup>
        </div>
        <div class="item">
            <van-field v-model="detail" type="text" placeholder="详细地址，如楼道、楼盘号等" />
        </div>
        <div class="item item0">
        <van-checkbox v-model="checked" shape="square" checked-color="#ee0a24">设置为默认地址</van-checkbox>
        </div>
    
        <div class="address-save" @click="saveAddress">保存</div>
  </div>
</div>
</template>

<script>
import areaList from "@/assets/area.js";
import {saveAction} from "@/api/mine/address";
export default {
    data(){
        return{
            // 选择地区时的数据
            areaList,
            // 填写信息
            name:"",
            tel:"",
            detail:"",
            //是否默认
            checked:false,
            // 选择地址弹出
            show:false,
            //存放选择的地址
            city:"",
            // 个人ID
            openId:localStorage.getItem("openId")

            
        }
    },
    components:{
        
    },
    created(){
        
    },
    methods:{
        // 左上点击返回时进行的跳转
        onClickLeft(){
            this.$router.push("/mine/address")
        },
        // 点击选择地址出现
        switchs(){
            this.show = !this.show
        },
        // 选择地址渲染到页面
        getArea(res){
            console.log(res);
            var country='';
            for(var i = 0;i<res.length;i++){
                country= country + res[i].name + ' ';
            }
            document.querySelector(".area").innerHTML = country
            this.city=country
            this.show = !this.show
            console.log(this.name);
            console.log(typeof this.name);
        },
        //保存地址到后台
        saveAddress(){
            saveAction({
                address:this.city,
                addressId:"",
                checked:this.checked,
                detailadress:this.detail,
                openId:this.openId,
                telNumber:this.tel,
                userName:this.name,
            }).then(res=>{
                
                
                if(res.data==true){
                    this.$toast('保存成功');
                    this.$router.push("/mine/address");

                }else{
                    this.$toast('保存失败');
                }
                
            })
        }
    }

};
</script>

<style lang="scss">
    // 取消输入框左边文字显示
    .van-cell__title{
        display: none;
    }
    // 左上返回样式
    .van-nav-bar__left .van-nav-bar__text,
    .van-nav-bar__left .van-icon-arrow-left{
        color: #b4282d;
    }
    .newAddress{
        height: 667px;
        background-color: #fff;
    }
</style>
<style lang="scss" scoped>
    
    .item{
        padding: 5px 0;
        margin: 0 15px;
        border-bottom: 1px solid #f4f4f4;
        }
    .item.item0{
        border-bottom:none;
        margin-top: 20px;
    }
    .address-save{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
        background: #b4282d;
        color: #fff;
        font-size: 16px;
    }
    .van-cell::after{
        border: none;
    }
</style>